@extends('layouts.main')

@section('title', 'Inspiring')

@section('sidebar')

    <div class="am-u-md-3 am-u-md-pull-9 my-sidebar">
        <div class="am-offcanvas" id="sidebar">
            <div class="am-offcanvas-bar">
                <ul class="am-nav">
                    <li class="am-nav-header">Tag</li>
                    @foreach( $tags as $key => $tag)
                        <li><a class="getContent" data-tagid="{{$key}}" href="javascript:void(0);">{{$tag}}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <a href="#sidebar" class="am-btn am-btn-sm am-btn-success am-icon-bars am-show-sm-only my-button" data-am-offcanvas><span class="am-sr-only">导航</span></a>

@stop

@section('content')
    <div class="am-u-md-9 am-u-md-push-3">
        <div class="am-g">
            <div class="am-u-sm-11 am-u-sm-centered" id="conbox">
                <div class="am-alert am-alert-success" data-am-alert>
                    <button type="button" class="am-close">&times;</button>
                    <p>没什么可给你，但求凭这阙歌。谢谢你风雨里，都不退愿陪着我。</p>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
    <script>
        $(document).ready(function () {
            $(".getContent").on('click', function () {
                var $this = $(this);
                var tagid = $this.data('tagid');
                $.ajax({
                    type: "POST",
                    url: "getContent",
                    data: {tagid: tagid},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {

                            var colors = ["am-alert-success","am-alert-warning","am-alert-danger","am-alert-secondary", ""];

                            // 颜色变化
                            var str = '';
                            var inp = data.data;
                            for (var i = 0; i < inp.length; i++) {
                                console.log(colors[Math.floor(Math.random()*colors.length)]);
                                str += '<div class="am-alert ' + colors[Math.floor(Math.random()*colors.length)] +'" data-am-alert>' +
                                '   <button type="button" class="am-close">&times;</button>' +
                                '   <p>' + inp[i].title + '</p>' +
                                '</div>';
                            }
                            $("#conbox").html(str);
                        } else {
                            alert(data.message);
                        }
                    }
                });
            });
        });
    </script>
@stop